<!--
 * @Description: 评分tag
 * @Author: qingyang
 * @Date: 2024-01-18 17:32:05
 * @LastEditors: qingyang
 * @LastEditTime: 2024-01-18 17:32:05
-->
<template>
  <div class="scope-tag" :class="`scope-tag--${computedScope}`">
    <CIcon type="c-mian-pingfen" class="tag-icon" v-if="type == 'num'"></CIcon>
    <span v-if="props.type == 'text'" class="span g-ml4">{{ computedScopeText }}</span>
    <span v-else class="span g-ml4">{{ props.label }} {{ props.scope }}</span>
  </div>
</template>
<script lang="ts" setup>
import { withDefaults, defineProps, computed } from 'vue';
interface IProps {
  label?: string;
  scope: number;
  type: 'num' | 'text';
}
const props = withDefaults(defineProps<IProps>(), {
  scope: 1,
  type: 'num'
});
const computedScope = computed(() => {
  if (props.scope <= 1.5) {
    return 1;
  } else if (props.scope <= 2) {
    return 2;
  } else if (props.scope <= 3) {
    return 3;
  }
  if (props.scope <= 4) {
    return 4;
  } else {
    return 5;
  }
});
const computedScopeText = computed(() => {
  if (props.scope <= 1.5) {
    return '非常好';
  } else if (props.scope <= 2) {
    return '很好';
  } else if (props.scope <= 3) {
    return '好';
  }
  if (props.scope <= 4) {
    return '一般';
  } else {
    return '较差';
  }
});
</script>
<style lang="scss" scoped>
.scope-tag {
  height: 20px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  background: #e9f5f0;
  border-radius: 2px;
  .tag-icon {
    font-size: 10px;
  }
  .span {
    font-size: 12px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    // color: #014434;
    line-height: 20px;
  }
}
/** 评分五个等级 */
.scope-tag--1 {
  background: #e9f5f0;
  color: #014434;
}
.scope-tag--2 {
  background: #e9f5f0;
  color: #014434;
}
.scope-tag--3 {
  background: #edf8fd;
  color: #4c91f1;
}
.scope-tag--4 {
  background: #eef1f5;
  color: #5a739a;
}
.scope-tag--5 {
  background: #fcf7e6;
  color: #f68144;
}
</style>
